/**
 * 开关组件样式
 */
export function styles(): string {
  const sliderWidth = '50px'
  const sliderHeight = '26px'
  const thumbSize = '18px'

  return `
    .toggle-switch {
      all: initial !important;
      display: flex !important;
      align-items: center !important;
      gap: 8px;
      cursor: pointer !important;
      
      input {
        opacity: 0;
        width: 0;
        height: 0;
        
        &:disabled + .slider {
          cursor: not-allowed;
          opacity: 0.5;
        }
      }

      .slider {
        position: relative;
        width: ${sliderWidth};
        height: ${sliderHeight};
        background-color: #ced4da; /* 开关关闭时 */
        border-radius: 34px;
        transition: .4s;
        
        &:before {
          position: absolute;
          content: "";
          height: ${thumbSize};
          width: ${thumbSize};
          left: 4px;
          bottom: 4px;
          background-color: white;
          transition: .4s;
          border-radius: 50%;
        }
      }
      
      input:checked + .slider {
        background-color: #0d6efd; /* 开关打开时 */
      }
      
      input:checked + .slider:before {
        transform: translateX(calc(${sliderWidth} - ${thumbSize} - 8px));
      }
      
      .toggle-label {
        font-size: 13px;
        color: #212529;
        min-width: 30px;
        text-align: center;
        margin-left: 5px;
        user-select: none !important;
      }
    }
  `
}
